<template>
	<view class="container">
		<!-- 顶部导航栏 -->
		<view class="navbar">
			<view class="nav-left" @click="goBack">
				<text class="back-icon">←</text>
			</view>
			<view class="nav-title">佳安公寓</view>
			<view class="nav-right">
				<text class="share-icon">⇧</text>
			</view>
		</view>
		
		<!-- 图片展示 -->
		<view class="image-container">
			<image src="/static/2.png" mode="aspectFill"></image>
	</view>
		
		<!-- 房源信息 -->
		<view class="info-section">
			<view class="title">整租·佳安公寓 3居室 14500</view>
			
			<!-- 标签 -->
			<view class="tags">
				<view class="tag tag-subway">近地铁</view>
				<view class="tag tag-decoration">精装</view>
				<view class="tag tag-feature">双卫生间</view>
				<view class="tag tag-view">随时看房</view>
			</view>
		</view>
		
		<!-- 关键信息 -->
		<view class="key-info">
			<view class="info-item">
				<view class="info-value">14500/月</view>
				<view class="info-label">租金</view>
			</view>
			<view class="info-item">
				<view class="info-value">三室</view>
				<view class="info-label">房型</view>
			</view>
			<view class="info-item">
				<view class="info-value">110平方</view>
				<view class="info-label">面积</view>
			</view>
		</view>
		
		<!-- 详细信息 -->
		<view class="detail-info">
			<view class="info-col">
				<view class="detail-row">
					<view class="detail-label">装修：</view>
					<view class="detail-value">精装</view>
				</view>
				<view class="detail-row">
					<view class="detail-label">楼层：</view>
					<view class="detail-value">中楼层</view>
				</view>
			</view>
			<view class="info-col">
				<view class="detail-row">
					<view class="detail-label">朝向：</view>
					<view class="detail-value">南</view>
				</view>
				<view class="detail-row">
					<view class="detail-label">类型：</view>
					<view class="detail-value">普通住宅</view>
				</view>
			</view>
		</view>
		
		<!-- 小区信息 -->
		<!-- <view class="community-info">
			<view class="community-title">小区：整租·佳安公寓 3居室 14500</view>
		</view> -->
		
		<!-- 地图 -->
		<view class="map-container">
			<image src="/static/2.png" mode="aspectFill"></image>
		</view>
		
		<!-- 房屋配套 -->
		<view class="facilities-section">
			<view class="section-title">房屋配套</view>
			<view class="facilities-list">
				<!-- 这里可以添加房屋配套的图标和文字 -->
			</view>
		</view>
		
		<!-- 底部操作栏 -->
		<view class="bottom-bar">
			<view class="action-buttons">
				<view class="button favorite-btn" @click="toggleFavorite">
					<text class="favorite-icon">★</text>
					<text class="favorite-text">已收藏</text>
				</view>
				<view class="button consult-btn" @click="onlineConsult">在线咨询</view>
				<view class="button book-btn" @click="phoneBook">电话预定</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isFavorite: true
			}
		},
		methods: {
			goBack() {
				// 返回上一页
				wx.navigateBack();
			},
			toggleFavorite() {
				// 切换收藏状态
				this.isFavorite = !this.isFavorite;
			},
			onlineConsult() {
				// 在线咨询功能
				console.log('在线咨询');
			},
			phoneBook() {
				// 电话预定功能
				console.log('电话预定');
			}
		}
	}
</script>

<style scoped>
	.container {
		font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
		background-color: #f5f5f5;
		min-height: 100vh;
		position: relative;
		padding-bottom: 60px;
	}
	
	/* 顶部导航栏 */
	.navbar {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 44px;
		background-color: #fff;
		z-index: 1000;
		box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
	}
	
	.nav-left, .nav-right {
		width: 44px;
		height: 44px;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.back-icon {
		font-size: 20px;
		color: #333;
	}
	
	.share-icon {
		font-size: 18px;
		color: #333;
	}
	
	.nav-title {
		flex: 1;
		text-align: center;
		font-size: 16px;
		font-weight: 600;
		color: #333;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	
	/* 图片展示 */
	.image-container {
		width: 100%;
		height: 250px;
		margin-top: 10px;
		background-color: #f0f0f0;
	}
	
	.image-container image {
		width: 100%;
		height: 100%;
	}
	
	/* 房源信息 */
	.info-section {
		background-color: #fff;
		padding: 15px;
		margin-bottom: 10px;
	}
	
	.title {
		font-size: 16px;
		font-weight: 600;
		color: #333;
		margin-bottom: 10px;
		line-height: 1.4;
	}
	
	.tags {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
	}
	
	.tag {
		padding: 3px 8px;
		border-radius: 3px;
		font-size: 12px;
	}
	
	.tag-subway {
		background-color: #e6f7ff;
		color: #1890ff;
	}
	
	.tag-decoration {
		background-color: #f6ffed;
		color: #52c41a;
	}
	
	.tag-feature {
		background-color: #fff7e6;
		color: #fa8c16;
	}
	
	.tag-view {
		background-color: #f5f5f5;
		color: #666;
	}
	
	/* 关键信息 */
	.key-info {
		display: flex;
		background-color: #fff;
		padding: 15px 0;
		margin-bottom: 10px;
	}
	
	.info-item {
		flex: 1;
		text-align: center;
		position: relative;
	}
	
	.info-item::after {
		content: '';
		position: absolute;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
		width: 1px;
		height: 40px;
		background-color: #f0f0f0;
	}
	
	.info-item:last-child::after {
		display: none;
	}
	
	.info-value {
		font-size: 18px;
		font-weight: 700;
		color: #ff4d4f;
		margin-bottom: 5px;
	}
	
	.info-label {
		font-size: 12px;
		color: #999;
	}
	
	/* 详细信息 */
	.detail-info {
		background-color: #fff;
		padding: 15px;
		margin-bottom: 10px;
		display: flex;
		justify-content: space-between;
	}
	
	.info-col {
		width: 48%;
	}
	
	.detail-row {
		display: flex;
		margin-bottom: 8px;
		font-size: 14px;
	}
	
	.detail-row:last-child {
		margin-bottom: 0;
	}
	
	.detail-label {
		color: #666;
		margin-right: 5px;
	}
	
	.detail-value {
		color: #333;
		font-weight: 500;
	}
	
	/* 小区信息 */
	/* .community-info {
		background-color: #fff;
		padding: 15px;
		margin-bottom: 10px;
	}
	
	.community-title {
		font-size: 14px;
		color: #333;
		line-height: 1.4;
	} */
	
	/* 地图 */
	.map-container {
		width: 100%;
		height: 200px;
		background-color: #f0f0f0;
		margin-bottom: 10px;
	}
	
	.map-container image {
		width: 100%;
		height: 100%;
	}
	
	/* 房屋配套 */
	.facilities-section {
		background-color: #fff;
		padding: 15px;
		margin-bottom: 10px;
	}
	
	.section-title {
		font-size: 16px;
		font-weight: 600;
		color: #333;
		margin-bottom: 15px;
	}
	
	/* 底部操作栏 */
	.bottom-bar {
		position: fixed;
		bottom: 0px;
		left: 0;
		right: 0;
		background-color: #fff;
		padding: 10px 15px;
		box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
	}
	
	.action-buttons {
		display: flex;
		align-items: center;
		gap: 10px;
	}
	
	.button {
		flex: 1;
		height: 40px;
		border-radius: 20px;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 14px;
		font-weight: 500;
	}
	
	.favorite-btn {
		background-color: #fff;
		color: #faad14;
		border: 1px solid #faad14;
	}
	
	.favorite-icon {
		margin-right: 5px;
		font-size: 16px;
	}
	
	.consult-btn {
		background-color: #1890ff;
		color: #fff;
	}
	
	.book-btn {
		background-color: #52c41a;
		color: #fff;
	}
</style>
